
import { Modal, Button} from 'antd';
import React, { useState, useRef } from 'react';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
import { DeviceTableListItem } from './data';
import deviceList from '../../func/device_list';
import DevicedetialForm from './devicedetialform/devicedetialform';
import resultGet from '../../func/result_get';
import rowresultGet from '../../func/row_result_get';


export interface DeviceProps {
  onCancel: (flag?: boolean) => void;
  ModalVisible: boolean;
  orderkey:any;
}


const DeviceForm: React.FC<DeviceProps> = (props) => {
  const actionRef = useRef<ActionType>();
  const order_key = props.orderkey;
  const [result, setResult] = useState<any>([]);
  const [ids, setIds] = useState<any>([]);
  const [devicedetialModalVisible, handleDevicedetialModalVisible] = useState<boolean>(false);
  const [selectedRowsState, setSelectedRows] = useState<any>([]);
  const columns: ProColumns<DeviceTableListItem>[] = [
    {
      title: "sn号",
      dataIndex: 'device_id',
      valueType: 'text',
      search:false
    },
    {
      title: "订单ID",
      dataIndex: 'order_id',
      valueType: 'text',
      search:false
    },
    {
      title: "mcu_id",
      dataIndex: 'mcu_id',
      valueType: 'text',
      search:false
    },
    {
      title: "品名",
      dataIndex: 'product_name',
      valueType: 'text',
      search:false
    },
    {
      title: "品号",
      dataIndex: 'product_number',
      valueType: 'text',
    },
    {
      title: "操作",
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <>
          <a
            onClick={async() => {
                handleDevicedetialModalVisible(true)
                const t = await resultGet({"device_id":record.id})
                setIds([record.id])
                setResult(t)
            }}
          >
          参数配置
          </a>
        </>
      ),
    },
  ]
  return (
    <Modal
      width={1040}
      bodyStyle={{ padding: '32px 40px 48px' }}
      destroyOnClose
      title={"创建发布"}
      visible={props.ModalVisible}
      onCancel={() => props.onCancel()}
      onOk={() => props.onCancel()}
    >
    <PageContainer>
      <ProTable<DeviceTableListItem>
        headerTitle={"发布详情"}
        actionRef={actionRef}
        rowKey="id"
        request={(params, sorter, filter) => deviceList({ ...params, sorter, filter, order_key })}
        columns={columns}
        rowSelection={{
          onChange: (row, selectedRows) => setSelectedRows(row),
        }}
      />
      {selectedRowsState?.length > 0 && (
        <FooterToolbar
          extra={
            <div>
              已选择{' '}
              <a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
              &nbsp;&nbsp;
            </div>
          }
        >
          <Button
            onClick={async () => {
              const t = await rowresultGet(selectedRowsState)
              setResult(t)
              setIds(selectedRowsState)
              handleDevicedetialModalVisible(true)
            }}
          >
            批量参数配置
          </Button>
        </FooterToolbar>
      )}
      <DevicedetialForm
        onCancel={() => {
          handleDevicedetialModalVisible(false);
        }}
        modalVisible={devicedetialModalVisible}
        result={result}
        ids={ids}
      />
    </PageContainer>
    </Modal>
  )
}

export default DeviceForm